<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <base href="<%=request.getContextPath()%>/">
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <script src="static/jquery/jquery.js"></script>
    <script src="static/layui/layui.js"></script>
</head>
<body>
<div class="layui-container">
    <form class="layui-form layui-row">
        <div class="layui-col-md3">
            <div class="layui-form-item">
                <label class="layui-form-label" for="name">广告名：</label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="name" placeholder="精确匹配" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-form-item">
                <label class="layui-form-label" for="target">跳转方式：</label>
                <div class="layui-input-block">
                    <select name="target" id="target">
                        <option value="">[选择方式]</option>
                        <option value="_self">当前页</option>
                        <option value="_blank">新页面</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-form-item">
                <label class="layui-form-label" for="status">状态：</label>
                <div class="layui-input-block">
                    <select name="status" id="status">
                        <option value="">[选择状态]</option>
                        <option value="1">可用</option>
                        <option value="2">禁用</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-form-item">
                <label class="layui-form-label" for="timeRange">广告时间：</label>
                <div class="layui-input-block">
                    <input type="text" name="timeRange" id="timeRange" placeholder="选择日期范围" autocomplete="off"
                           readonly
                           class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-col-md3">
            <div style="margin-left: 20px">
                <button class="layui-btn layui-bg-blue" lay-submit lay-filter="search">查询</button>
                <button type="reset" class="layui-btn layui-bg-orange">清空</button>
            </div>
        </div>
    </form>
    <div style="height: 530px;overflow-y: scroll;margin-top: 10px">
        <table id="dataTable"></table>
    </div>
</div>
</body>
<script type="text/html" id="toolbar">
    <button type="button" class="layui-btn layui-btn-sm" lay-event="add">添加</button>
</script>
<script type="text/html" id="optTemplet">
    <button type="button" lay-event="edit" class="layui-btn layui-btn-sm layui-bg-blue">修改</button>
    <button type="button" lay-event="delete" class="layui-btn layui-btn-sm layui-bg-orange">删除</button>
</script>
<script type="text/html" id="statusTemplet">
    {{# if(d.status === 1){ }}
    <button type="button" lay-event="status" class="layui-btn layui-btn-sm layui-bg-green">可用</button>
    {{# }else{ }}
    <button type="button" lay-event="status" class="layui-btn layui-btn-sm layui-bg-red">禁用</button>
    {{# } }}
</script>
<script type="text/html" id="hrefTemplet">
    {{# if(d.href){ }}
    <a href="{{d.href}}" title="{{d.href}}" target="{{d.target}}">点我跳转</a>
    {{# }else{ }}
    <span>暂无地址</span>
    {{# } }}
</script>
<script>
    var table;
    var form;
    layui.use(function () {
        /*加载表格模块*/
        table = layui.table;
        /*加载表单模块*/
        form = layui.form;
        const laydate = layui.laydate;
        laydate.render({
            elem: "#timeRange",
            type: "datetime",
            range: true
        });
        /*渲染表格数据*/
        table.render({
            elem: "#dataTable",
            url: "admin/banner/page",
            toolbar: "#toolbar",
            defaultToolbar: ['filter', 'print'],
            page: true,
            limit: 5,
            limits: [5, 10, 20, 50, 100],
            cols: [[
                {field: "id", title: "编号", width: '80'},
                {field: 'name', title: '广告名称', width: '120'},
                {field: 'href', title: '跳转地址', width: '120', templet: '#hrefTemplet'},
                {
                    field: 'target', title: '跳转方式', width: '120', templet: function (d) {
                        if (d.target === '_self') {
                            return "当前页";
                        }
                        return "新窗口";
                    }
                },
                {field: 'orderNum', title: '排序值', width: '120'},
                {field: 'expiresStart', title: '开始时间', width: '180'},
                {field: 'expiresEnd', title: '结束时间', width: '180'},
                {field: 'status', title: '状态', templet: "#statusTemplet", width: '100'},
                {title: '操作', templet: '#optTemplet', fixed: "right", width: "160"}
            ]]
        });
        /*监听表格工具栏按钮*/
        table.on("tool(dataTable)", function (obj) {
            const id = obj.data.id;
            const event = obj.event;
            switch (event) {
                case "delete":
                    layer.confirm('确定删除编号[' + id + ']的数据吗?', {
                        icon: 3,
                        title: '询问'
                    }, function (index) {
                        $.ajax({
                            url: "admin/banner/delete/" + id,
                            method: "delete",
                            dataType: "json",
                            success(res) {
                                if (res.code === 200) {
                                    layer.msg("删除成功", {icon: 1})
                                    table.reloadData('dataTable')
                                } else {
                                    layer.alert(res.msg, {icon: 2})
                                }
                            },
                            error(e) {
                                layer.alert('服务器睡着了')
                                console.log(e)
                            }
                        })
                        layer.close(index);
                    })
                    break;
                case "edit":
                    layer.open({
                        type: 2,
                        content: "admin/banner/edit?id=" + id,
                        area: ["600px", "600px"]
                    })
                    break;
                case "status":
                    let $status = '<span style="color: red">禁用</span>';
                    if (obj.data.status === 2) {
                        $status = '<span style="color: green">可用</span>';
                    }
                    layer.confirm('确定更改[' + id + ']的状态为' + $status + "吗?", {
                        icon: 3,
                        title: "询问"
                    }, function (index) {
                        $.ajax({
                            url: "admin/banner/status",
                            data: {
                                id,
                                status: obj.data.status === 1 ? 2 : 1
                            },
                            method: "post",
                            dataType: "json",
                            success(res) {
                                if (res.code === 200) {
                                    layer.msg("状态更新成功！", {icon: 1})
                                    table.reloadData('dataTable')
                                } else {
                                    layer.alert(res.msg, {icon: 2});
                                }
                            },
                            error(e) {
                                layer.alert('服务器睡着了')
                                console.log(e)
                            }
                        })
                        layer.close(index);
                    })
                    break;
                default:
                    layer.msg("工具选项异常！", {icon: 2});
                    break;
            }
        });
        /*监听表格头部按钮*/
        table.on("toolbar(dataTable)", function (obj) {
            const event = obj.event;
            switch (event) {
                case "LAYTABLE_PRINT":
                case "LAYTABLE_COLS":
                    break;
                case "add":
                    layer.open({
                        type: 2,
                        content: "admin/banner/edit",
                        area: ["600px", "600px"]
                    })
                    break;
                default:
                    layer.msg("工具选项异常！", {icon: 2});
                    break;
            }
        })
        /*监听表单提交(查询按钮)*/
        form.on("submit(search)", function (data) {
            const timeRange = data.field.timeRange;
            if (timeRange) {
                const times = timeRange.split(" - ");
                data.field.expiresStart = times[0];
                data.field.expiresEnd = times[1];
            }
            table.reload('dataTable', {
                where: {
                    ...data.field,
                    page: 1
                }
            });
            return false;
        });
    });

</script>
</html>
